import React, {useRef} from 'react';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {searchUsers} from "@/services/ant-design-pro/api";
import {Image} from "antd";

const columns: ProColumns<API.CurrentUser>[] = [
  {
    dataIndex: 'id',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '用户名',
    dataIndex: 'username',
    copyable: true,//允许复制
    ellipsis: true,//允许缩略
  },
  {
    title: '用户账户',
    dataIndex: 'userAccount',
    copyable: true,//允许复制
  },
  {
    title: '用户头像',
    dataIndex: 'avatarUrl',
    search:false,//禁止查询表单渲染
    render: (_, record) => (
      <div>
        <Image src={record.avatarUrl} width={50}/>
      </div>
    ),
  },
  {
    title: '性别',
    dataIndex: 'gender',
    search:false,
    valueEnum: {
      0: {text: '男'},
      1: {
        text: '女',
      },
      2: {
        text: '未知',
      },
    }
  },
  {
    title: '电话',
    dataIndex: 'phone',
    search:false,
    copyable: true,//允许复制
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    search:false,
    copyable: true,//允许复制
  },
  {
    title: '用户状态',
    dataIndex: 'userStatus',
    search:false,
    valueEnum: {
      0: {text: '正常', status: 'Success'},
    }
  },
  {
    title: '用户角色',
    dataIndex: 'userRole',
    search:false,
    valueEnum: {
      0: {text: '普通用户', status: 'Default'},
      1: {
        text: '管理员', status: 'Success'
      },
      2: {
        text: 'VIP', status: 'Processing'
      },
    }
  },
  {
    title: '创建时间',
    search:false,
    dataIndex: 'createTime',
    valueType: 'date',//声明列的类型
  },
  // todo 编辑接口
  // {
  //   title: '操作',
  //   valueType: 'option',
  //   render: (text, record, _, action) => [
  //     <a
  //       key="editable"
  //       onClick={() => {
  //         action?.startEditable?.(record.id);
  //       }}
  //     >
  //       编辑
  //     </a>,
  //     <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
  //       查看
  //     </a>,
  //     <TableDropdown
  //       key="actionGroup"
  //       onSelect={() => action?.reload()}
  //
  //       menus={[
  //         {key: 'copy', name: '复制'},
  //         {key: 'delete', name: '删除'},
  //       ]}
  //     />,
  //   ],
  // },
];


export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable<API.CurrentUser>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params = {}, sort, filter) => {
        const { username, userAccount } = params;
        const query = {
          username,
          userAccount,
        };
        console.log(sort, filter);
        const userList = await searchUsers(query);
        return {
          data: userList,
        };
      }}
      editable={{
        type: 'multiple',
      }}
      columnsState={{
        // 表格持久化，本地存储
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
      }}
      rowKey="id" //唯一键指定
      search={{
        // 自适应搜索表单
        labelWidth: 'auto',
      }}
      form={{
        // 由于配置了 transform，提交的参数与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      pagination={{
        //配置分页
        pageSize: 5,
      }}
      dateFormatter="string" //日期格式化
      headerTitle="用户表"
    />
  );
};
